﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="Description" content="ChronoZoom is an open-source community project dedicated to visualizing the history of everything." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <script type="text/javascript">
   	// Invoke timings.show() to get timings
   	var timings = new Object();
   	timings.parseStarted = new Date();
   	timings.show = function () {
   		var msg =
                "External scripts loading: " + (timings.scriptsLoaded - timings.parseStarted) +
                " ms\nDocument ready handler: " + (timings.readyStarted - timings.scriptsLoaded) +
                " ms\n\nRequesting server for timelines data: " + (timings.wcfRequestCompleted - timings.wcfRequestStarted) +
                " ms\nLayout algorithm: " + (timings.layoutCompleted - timings.wcfRequestCompleted) +
                " ms\nPopulating virtual canvas: " + (timings.canvasInited - timings.layoutCompleted) + " ms";
   		alert(msg);
   	}

   	var _gaq = _gaq || [];
   	_gaq.push(['_setAccount', 'UA-29180487-2']);
   	_gaq.push(['_setDomainName', 'chronozoomproject.org']);
   	_gaq.push(['_setAllowLinker', true]);
   	_gaq.push(['_trackPageview']);
   	(function () {
   		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   	})();
</script>

    <link rel="stylesheet" type="text/css" href="Styles/cz.css" />
    <link rel="stylesheet" type="text/css" href="Styles/axis.css" />

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.cookie.js"></script>
    <script type="text/javascript" src="Scripts/rx.js"></script>
    <script type="text/javascript" src="Scripts/rx.jQuery.js"></script>
    <script type="text/javascript" src="Scripts/seadragon-min.js"></script>
    <script type="text/javascript" src="Scripts/cz.settings.js"></script>
    <script type="text/javascript" src="Scripts/common.js"></script>
    <script type="text/javascript" src="Scripts/viewport.js"></script>
    <script type="text/javascript" src="Scripts/viewportAnimation.js"></script>
    <script type="text/javascript" src="Scripts/mouseWheelPlugin.js"></script>
    <script type="text/javascript" src="Scripts/gestures.js"></script>
    <script type="text/javascript" src="Scripts/virtualCanvas.js"></script>
    <script type="text/javascript" src="Scripts/vccontent.js"></script>
    <script type="text/javascript" src="Scripts/viewportController.js"></script>
    <script type="text/javascript" src="Scripts/axis.js"></script>
    <script type="text/javascript" src="Scripts/urlnav.js"></script>
    <script type="text/javascript" src="Scripts/layout.js"></script>
    <script type="text/javascript" src="Scripts/tours.js"></script>
    <script type="text/javascript" src="Scripts/search.js"></script>
    <script type="text/javascript" src="Scripts/bibliography.js"></script>
    <script type="text/javascript" src="Scripts/breadCrumbs.js"></script>
     <!--[if IE]>
    <script type="text/javascript" src="Scripts/regimesIE.js"></script>
    <![endif]-->
    <script type="text/javascript">

    	timings.scriptsLoaded = new Date();
    	var searchString;
    	var ax, vc;
    	var visReg;
    	var cosmosVisible, earthVisible, lifeVisible, prehistoryVisible, humanityVisible;
    	var content;
    	var breadCrumbs; //titles and visibles of the recent breadcrumbs

    	var firstTimeWelcomeChecked = true; // if welcome screen checkbox checked or not

    	var regimes = new Array();
    	var regimeNavigator;

    	var k = 1000000000;
    	var setNavigationStringTo; // { element or bookmark, id } identifies that we zoom into this element and when (if) finish the zoom, we should put the element's path into navigation string

    	var regimesRatio;

    	var hashHandle = true; // Handle hash change event

    	function updateAxis(vc, ax) {
    		var vp = vc.virtualCanvas("getViewport");
    		var lt = vp.pointScreenToVirtual(0, 0);
    		var rb = vp.pointScreenToVirtual(vp.width, vp.height);
    		ax.axis("setRange", lt.x, rb.x);
    	}

    	function updateNavigator(vp) {
    	    var navigatorFunc = function (coordinate) {
    	        if (Math.abs(coordinate) < 0.00000000001)
    	            return 0;
    	        //Get log10 from coordinate
    	        var log = Math.log(coordinate) / 2.302585092994046;
    	        //Get pow from log10
    	        var pow = Math.pow(log, 3) * Math.exp(-log * 0.001);
    	        //Get final width of the column
    	        return (log + pow) * 13700000000 / 1041.2113538234402;
    	    }

    	    var left = vp.pointScreenToVirtual(0, 0).x;
    	    if (left < maxPermitedTimeRange.left) left = maxPermitedTimeRange.left;
    	    var right = vp.pointScreenToVirtual(vp.width, vp.height).x;
    	    if (right > maxPermitedTimeRange.right) right = maxPermitedTimeRange.right;
    	    var newRight = navigatorFunc(Math.abs(right));
    	    var newLeft = navigatorFunc(Math.abs(left));
    	    var newWidth = Math.max(2.0 / regimesRatio, Math.abs(newRight - newLeft));

    	    var min = 0;
    	    var max = document.getElementById("cosmos_rect").clientWidth;

    	    var l = 301 - regimesRatio * newLeft;
    	    var w = regimesRatio * newWidth;

    	    if (l < 0 || l + w > max + 5)
    	        return;

    	    regimeNavigator.css('left', l);
    	    regimeNavigator.css('width', w);
    	}

    	var controller; //a controller to perform smooth navigation
    	var isAxisFreezed = true; //indicates whether the axis moves together with canvas during navigation or not
    	var startHash;

    	function getCookie(c_name) {
    		var i, x, y, ARRcookies = document.cookie.split(";");
    		for (i = 0; i < ARRcookies.length; i++) {
    			x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    			y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    			x = x.replace(/^\s+|\s+$/g, "");
    			if (x == c_name) {
    				return unescape(y);
    			}
            }
            return null;
    	}

    	$(document).ready(function () {
    	    $('.bubbleInfo').hide();
    	    ("#axis").showThresholds = true;
    	    var wlcmScrnCookie = getCookie("welcomeScreenDisallowed");
    	    if (wlcmScrnCookie != null) {
    	        hideWelcomeScreen();
    	    }
    	    else {
    	        // click on gray area hides welcome screen
    	        $("#welcomeScreenOut").click(function (e) {
    	            e.stopPropagation();
    	        });

    	        $("#welcomeScreenBack").click(function () {
    	            hideWelcomeScreen();
    	        });
    	    }

    	    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    	        if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    	            var oprversion = new Number(RegExp.$1) // capture x.x portion and store as a number
    	            if (oprversion < 14.0) {
    	                var fallback_agreement = getCookie("new_bad_browser_agreement");
    	                if ((fallback_agreement == null) || (fallback_agreement == "")) {
    	                    window.location = "testFallBackPage.htm";
    	                    return;
    	                }
    	            }
    	        }
    	    }
    	    else if (navigator.userAgent.toLowerCase().indexOf('version') > -1) {
    	        if (/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    	            var oprversion = new Number(RegExp.$1) // capture x.x portion and store as a number
    	            if (oprversion < 5.0) {
    	                var fallback_agreement = getCookie("new_bad_browser_agreement");
    	                if ((fallback_agreement == null) || (fallback_agreement == "")) {
    	                    window.location = "testFallBackPage.htm";
    	                    return;
    	                }
    	            }
    	        }
    	    }
    	    else {
    	        var br = $.browser;
    	        var isIe9 = br.msie && parseInt(br.version, 10) >= 9;
    	        if (!isIe9) {
    	            var isFF9 = br.mozilla && parseInt(br.version, 10) >= 7;
    	            if (!isFF9) {
    	                var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    	                if (!is_chrome) {
    	                    var fallback_agreement = getCookie("new_bad_browser_agreement");
    	                    if ((fallback_agreement == null) || (fallback_agreement == "")) {
    	                        window.location = "testFallBackPage.htm";
    	                        return;
    	                    }
    	                }
    	                return;
    	            }
    	        }
    	    }

    	    if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
    	        // Suppress the default iOS elastic pan/zoom actions.
    	        document.addEventListener('touchmove', function (e) { e.preventDefault(); });
    	    }

    	    if (navigator.userAgent.indexOf('Mac') != -1) {
    	        // Disable Mac OS Scrolling Bounce Effect
    	        var body = document.getElementsByTagName('body')[0];
    	        body.style.overflow = "hidden";
    	    }

    	    // init seadragon. set path to image resources for nav buttons 
    	    Seadragon.Config.imagePath = seadragonImagePath;

    	    maxPermitedVerticalRange = { top: 0, bottom: 10000000 }; //temporary value until there is no data
    	    timings.readyStarted = new Date();

    	    ax = $("#axis");
    	    ax.axis();

    	    vc = $("#vc");
    	    vc.virtualCanvas();

    	    regimeNavigator = $('#regime_navigator');
    	    regimeNavigator.click(passThrough);
    	    regimesRatio = 300 / Math.abs(maxPermitedTimeRange.left - maxPermitedTimeRange.right);

    	    if (window.location.hash)
    	        startHash = window.location.hash; // to be processes after the data is loaded
    	    loadData(); //retrieving the data

    	    initializeSearch();
    	    initializeBibliography();
    	    initializeToursUI();

    	    var canvasGestures = getGesturesStream(vc); //gesture sequence of the virtual canvas
    	    var axisGestures = applyAxisBehavior(getGesturesStream(ax)); //gesture sequence of axis (tranformed according to axis behavior logic)
    	    var jointGesturesStream = canvasGestures.Merge(axisGestures);

    	    controller = new ViewportController(
                            function (visible) {
                                var vp = vc.virtualCanvas("getViewport");
                                var markerPos = ax.axis("MarkerPosition");
                                var oldMarkerPosInScreen = vp.pointVirtualToScreen(markerPos, 0).x;

                                vc.virtualCanvas("setVisible", visible, controller.activeAnimation);
                                updateAxis(vc, ax);
                                vp = vc.virtualCanvas("getViewport");
                                if (pauseTourAtAnyAnimation) { //watch for the user animation during playing of some tour bookmark
                                    tourPause();
                                    pauseTourAtAnyAnimation = false;
                                }

                                var hoveredInfodot = vc.virtualCanvas("getHoveredInfodot");
                                var actAni = controller.activeAnimation != undefined;

                                if (actAni && !hoveredInfodot.id) {
                                    var newMarkerPos = vp.pointScreenToVirtual(oldMarkerPosInScreen, 0).x;
                                    ax.axis("setTimeMarker", newMarkerPos);
                                }

                                updateNavigator(vp);
                            },
                            function () {
                                return vc.virtualCanvas("getViewport");
                            },
                            jointGesturesStream);

    	    var hashChangeFromOutside = true; // True if url is changed externally

    	    // URL Nav: update URL when animation is complete
    	    controller.onAnimationComplete.push(function (id) {
    	        hashChangeFromOutside = false;
    	        if (setNavigationStringTo && setNavigationStringTo.bookmark) { // go to search result
    	            navigationAnchor = navStringTovcElement(setNavigationStringTo.bookmark, vc.virtualCanvas("getLayerContent"));
    	            window.location.hash = setNavigationStringTo.bookmark;
    	        }
    	        else {
    	            if (setNavigationStringTo && setNavigationStringTo.id == id)
    	                navigationAnchor = setNavigationStringTo.element;

    	            var vp = vc.virtualCanvas("getViewport");
    	            window.location.hash = vcelementToNavString(navigationAnchor, vp);
    	        }
    	        setNavigationStringTo = null;
    	    });

    	    // URL Nav: handle URL changes from outside
    	    window.addEventListener("hashchange", function () {
    	        if (window.location.hash && hashChangeFromOutside && hashHandle) {
    	            var hash = window.location.hash;
    	            var visReg = navStringToVisible(window.location.hash.substring(1), vc);
    	            if (visReg) {
    	                isAxisFreezed = true;
    	                controller.moveToVisible(visReg, true);
    	                // to make sure that the hash is correct (it can be incorrectly changed in onCurrentlyObservedInfodotChanged)
    	                if (window.location.hash != hash) {
    	                    hashChangeFromOutside = false;
    	                    window.location.hash = hash;
    	                }
    	            }
    	            hashHandle = true;
    	        } else
    	            hashChangeFromOutside = true;
    	    });


    	    // Axis: enable showing thresholds
    	    controller.onAnimationComplete.push(function () {
    	        ax.axis("enableThresholds", true);
    	        //if (window.console && console.log("thresholds enabled"));
    	    });
    	    //Axis: disable showing thresholds
    	    controller.onAnimationStarted.push(function () {
    	        ax.axis("enableThresholds", true);
    	        //if (window.console && console.log("thresholds disabled"));
    	    });
    	    // Axis: enable showing thresholds
    	    controller.onAnimationUpdated.push(function (oldId, newId) {
    	        if (oldId != undefined && newId == undefined) { // animation interrupted
    	            setTimeout(function () {
    	                ax.axis("enableThresholds", true);
    	                //if (window.console && console.log("thresholds enabled"));
    	            }, 500);
    	        }
    	    });

    	    //Tour: notifyng tour that the bookmark is reached
    	    controller.onAnimationComplete.push(
                                function (id) {
                                    if (tourBookmarkTransitionCompleted != undefined)
                                        tourBookmarkTransitionCompleted(id);
                                    if (tour != undefined && tour.state != "finished") //enabling wathcing for user activity while playing the bookmark
                                        pauseTourAtAnyAnimation = true;
                                });
    	    //Tour: notifyng tour that the transition was interrupted
    	    controller.onAnimationUpdated.push(
                                function (oldId, newId) {
                                    if (tour != undefined) {
                                        if (tourBookmarkTransitionInterrupted != undefined) { //in transition
                                            var prevState = tour.state;
                                            tourBookmarkTransitionInterrupted(oldId);
                                            var alteredState = tour.state;

                                            if (prevState == "play" && alteredState == "pause") //interruption caused toue pausing. stop any animations, updating UI as well
                                                tourPause();

                                            setNavigationStringTo = null;
                                        }
                                    }
                                }
            );

    	    updateLayout();

    	    vc.bind("elementclick", function (e) {
    	        navigateToElement(e);
    	    });

    	    vc.bind('cursorPositionChanged', function (cursorPositionChangedEvent) {
    	        updateMarker();
    	    });

    	    ax.bind('thresholdBookmarkChanged', function (thresholdBookmark) {
    	        var bookmark = navStringToVisible(thresholdBookmark.Bookmark, vc);
    	        if (bookmark != undefined) {
    	            controller.moveToVisible(bookmark, false);
    	        }
    	    });

    	    // Reacting on the event when one of the infodot exploration causes inner zoom constraint
    	    vc.bind("innerZoomConstraintChenged", function (constraint) {
    	        controller.effectiveExplorationZoomConstraint = constraint.zoomValue; // applying the constraint
    	        ax.axis("allowMarkerMovesOnHover", !constraint.zoomValue);
    	    });

    	    vc.bind("breadCrumbsChanged", function (breadCrumbsEvent) { //reacting on the event when the first timeline that contains whole visible region is changed
    	        updateBreadCrumbsLabels(breadCrumbsEvent.breadCrumbs);
    	    });

    	    timings.readyFinished = new Date();
    	    var vp = vc.virtualCanvas("getViewport");
    	    vc.virtualCanvas("setVisible", getVisibleForElement({ x: -13700000000, y: 0, width: 13700000000, height: 5535444444.444445 }, 1.0, vp));
    	    updateAxis(vc, ax);

    	    var bid = window.location.hash.match("b=([a-z0-9_]+)");
    	    if (bid) {
    	        //bid[0] - source string
    	        //bid[1] - found match
    	        $("#bibliography .sources").empty();
    	        $("#bibliography .title").html("<span>Loading...</span>");
    	        $("#bibliographyBack").css("display", "block");
    	    }
    	});

    	function updateMarker() {
    		ax.axis("setTimeMarker", vc.virtualCanvas("getCursorPosition"));
    	}

    	var tourNotParsed = undefined; // indicates that URL was checked at tour sharing after page load

    	//loading the data from the service
    	function loadData() {
    		timings.wcfRequestStarted = new Date();
    		var url;
    		switch (czDataSource) {
    			case 'db': url = "Chronozoom.svc/get";
    				break;
    			case 'relay': url = "ChronozoomRelay";
    				break;
    			case 'dump': url = "ResponseDump.txt";
    				break;
    		}

    		$.ajax({ //main content fetching
    			cache: false,
    			type: "GET",
    			async: true,
    			dataType: "json",
    			url: url,
    			success: function (result) {
    				content = result;
    				ProcessContent(result);
    				
    				if (typeof tours !== 'undefined') { // tours are loaded, check at shared tour
    				    loadTourFromURL();
    				    tourNotParsed = false;
    				}
    				else // tours are not loaded yet, checking at shared tour will be after successful load of tours 
    				    tourNotParsed = true;
    			},
    			error: function (xhr) {
    				timings.RequestCompleted = new Date();
    				alert("Error connecting to service: " + xhr.responseText);
    			}
    		});

    		var toursUrl;
    		switch (czDataSource) {
    			case 'db': toursUrl = "Chronozoom.svc/getTours";
    				break;
    			case 'relay': toursUrl = "ChronozoomRelay";
    				break;
    			case 'dump': toursUrl = "toursDump.txt";
    				break;
    		}

    		$.ajax({ //tours fetching
    			cache: false,
    			type: "GET",
    			async: true,
    			dataType: "json",
    			url: toursUrl,
    			success: function (result) {
    				parseTours(result);
    				initializeToursContent();
    				
    			    // check at shared tour
    				if (tourNotParsed == true) {
    				    loadTourFromURL();
    				    tourNotParsed = false;
    				}                        
    			},
    			error: function (xhr) {
    				$("tours_index").attr("onmouseup", function () {
    					alert("The tours failed to download. Please refresh the page later and try to activate tours again.");
    				});
    				initializeToursContent();
    			}
    		});
    	}

    	function ProcessContent(content) {
    		timings.wcfRequestCompleted = new Date();
    		Load(vc, content.d);
    		timings.layoutCompleted = new Date();
    		if (startHash) { // restoring the window's hash as it was on the page loading
    			visReg = navStringToVisible(startHash.substring(1), vc);
    		}

    		InitializeRegimes();
    		if (!visReg && cosmosVisible) {
    			window.location.hash = cosmosVisible;
    			visReg = navStringToVisible(cosmosVisible, vc);
    		}
    		if (visReg) {
    			vc.virtualCanvas("setVisible", visReg);
    			updateAxis(vc, ax);
    			var vp = vc.virtualCanvas("getViewport");
    			updateNavigator(vp);

    			if (startHash && window.location.hash !== startHash) {
    				hashChangeFromOutside = false;
    				window.location.hash = startHash; // synchronizing
    			}
    		}
    		timings.canvasInited = new Date();
    	}

    	function InitializeRegimes() {
    		if (content) {
    			if (content.d.length > 0) {
    				var f = function (timeline) {
    					if (!timeline) return null;
    					var v = vc.virtualCanvas("findElement", 't' + timeline.UniqueID);
    					regimes.push(v);
    					if (v) v = vcelementToNavString(v);
    					return v;
    				}

    				var cosmosTimeline = content.d[0];
    				cosmosVisible = f(cosmosTimeline);
    				navigationAnchor = vc.virtualCanvas("findElement", 't' + cosmosTimeline.UniqueID);

    				var earthTimeline = FindChildTimeline(cosmosTimeline, earthTimelineID);
    				earthVisible = f(earthTimeline);
    				var lifeTimeline = FindChildTimeline(earthTimeline, lifeTimelineID);
    				lifeVisible = f(lifeTimeline);
    				var prehistoryTimeline = FindChildTimeline(lifeTimeline, prehistoryTimelineID);
    				prehistoryVisible = f(prehistoryTimeline);
    				var humanityTimeline = FindChildTimeline(prehistoryTimeline, humanityTimelineID, true);
    				humanityVisible = f(humanityTimeline);

    				maxPermitedVerticalRange = {    //setting top and bottom observation constraints according to cosmos timeline
    					top: cosmosTimeline.y,
    					bottom: cosmosTimeline.y + cosmosTimeline.height
    				};

    				maxPermitedScale = navStringToVisible(cosmosVisible, vc).scale * 1.1;
    			}
    		}
    	}

    	$(window).bind('resize', function () {
    		updateLayout();
    	});

    	function updateLayout() {
    	    document.getElementById("vc").style.height = (window.innerHeight - 148) + "px";

    	    $(".breadCrumbPanel").css("width", Math.round(($("#vc").width() / 2 - 50)));
            $("#bc_navRight").css("left", ($(".breadCrumbPanel").width() + $(".breadCrumbPanel").position().left + 2) + "px");
            visibleAreaWidth = $(".breadCrumbPanel").width();
            updateHiddenBreadCrumbs();
            
            var height = window.innerHeight;
            var offset = height - 187;
    		// todo: use axis' height instead of constants
    		document.getElementById("bibliographyBack").style.height = window.innerHeight + "px";
    		document.getElementById("bibliographyOut").style.top = (150) + "px";
    		document.getElementById("bibliographyOut").style.height = offset + "px";
    		document.getElementById("bibliographyOut").style.top = (150) + "px";
    		document.getElementById("bibliography").style.height = (offset - 50) + "px";
    		document.getElementById("bibliography").style.top = (25) + "px";

    		document.getElementById("welcomeScreenBack").style.height = window.innerHeight + "px";
    		// todo: use (welcomeScreen' content + axis height + footer height) instead of consants
    		if (height <= 669) {
    		    document.getElementById("welcomeScreenOut").style.top = (150) + "px";
    		    document.getElementById("welcomeScreenOut").style.height = offset + "px";
    		    document.getElementById("welcomeScreenOut").style.top = (150) + "px";
    		    document.getElementById("welcomeScreen").style.height = (offset - 50) + "px";
    		}
    		else { // keeping height of welcome screen constant, positioning in center of canvas
    		    var diff = Math.floor((height - 669) / 2);
    		    document.getElementById("welcomeScreenOut").style.top = (150 + diff) + "px";
    		    document.getElementById("welcomeScreenOut").style.height = (482) + "px";
    		    document.getElementById("welcomeScreenOut").style.top = (150 + diff) + "px";
    		    document.getElementById("welcomeScreen").style.height = (432) + "px";
    		}
    		document.getElementById("welcomeScreen").style.top = (25) + "px";

    		InitializeRegimes();
    		vc.virtualCanvas("updateViewport");
    		ax.axis("updateWidth");
    		updateAxis(vc, ax);
    		updateBreadCrumbsLabels();
    	}

    	/*
    	Is called by direct user actions like links, bread crumbs clicking, etc.
    	*/
    	function setVisibleByUserDirectly(visible) {
    		pauseTourAtAnyAnimation = false;
    		if (tour != undefined && tour.state == "play")
    			tourPause();
    		return setVisible(visible);
    	}

    	function setVisible(visible) {
    		if (visible) {
    			//ax.axis("enableThresholds", false);
    			return controller.moveToVisible(visible);
    		}
    	}

    	function passThrough(e) {
    		var mouseX = e.pageX;
    		var mouseY = e.pageY;

    		var cosmos_rect = $("#cosmos_rect");
    		var offset_space = cosmos_rect.offset();
    		var width_space = cosmos_rect.width();
    		var height_space = cosmos_rect.height();
    		if (mouseX > offset_space.left && mouseX < offset_space.left + width_space
             && mouseY > offset_space.top && mouseY < offset_space.top + height_space)
    			navigateToBookmark(cosmosVisible);

    		var earth_rect = $("#earth_rect");
    		var offset_earth = earth_rect.offset();
    		var width_earth = earth_rect.width();
    		var height_earth = earth_rect.height();
    		if (mouseX > offset_earth.left && mouseX < offset_earth.left + width_earth
             && mouseY > offset_earth.top && mouseY < offset_earth.top + height_earth)
    			navigateToBookmark(earthVisible);

    		var life_rect = $("#life_rect");
    		var offset_life = life_rect.offset();
    		var width_life = life_rect.width();
    		var height_life = life_rect.height();
    		if (mouseX > offset_life.left && mouseX < offset_life.left + width_life
             && mouseY > offset_life.top && mouseY < offset_life.top + height_life)
    			navigateToBookmark(lifeVisible);

    		var prehuman_rect = $("#prehuman_rect");
    		var offset_prehuman = prehuman_rect.offset();
    		var width_prehuman = prehuman_rect.width();
    		var height_prehuman = prehuman_rect.height();
    		if (mouseX > offset_prehuman.left && mouseX < offset_prehuman.left + width_prehuman
             && mouseY > offset_prehuman.top && mouseY < offset_prehuman.top + height_prehuman)
    			navigateToBookmark(prehistoryVisible);

    		var human_rect = $("#human_rect");
    		var offset_human = human_rect.offset();
    		var width_human = human_rect.width();
    		var height_human = human_rect.height();
    		if (mouseX > offset_human.left && mouseX < offset_human.left + width_human
             && mouseY > offset_human.top && mouseY < offset_human.top + height_human)
    			navigateToBookmark(humanityVisible);
    	}

    	/*function activateWelcomeBox() {
    		$.cookie("welcomeScreenActive", "1");
    	}

		function checkboxWelcomeChanged() {
			if ($('input[name=welcomeScreenCheckbox]').is(':checked'))
				activateWelcomeBox();
			else {
				$.cookie("welcomeScreenActive", null);
			}
    	}*/

    	function closeWelcomeScreen() {
    	    if ($('input[name=welcomeScreenCheckbox]').is(':checked'))
    	        setCookie("welcomeScreenDisallowed", "1", 365);
                
            hideWelcomeScreen();  
        }

    	function hideWelcomeScreen() {
    	    document.getElementById("welcomeVideo").src = "";
			$("#welcomeScreenBack").css("display", "none");
        }

        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }


	</script>
    <title>ChronoZoom</title>
</head>
<body style="background-color: Black; min-width: 950px;" >
	
    <div id="header" style="height: 67px">
        <div style="position: relative">
            
            <div style="left: 15px; height: 29px; position: absolute;">
                <img style="margin: 9px 0 0 5px;  float: left" title="ChronoZoom" src="Images/chronzoom-200px-white.png" />
                <img style="margin: 5px 0 0 14px; float: right" id="search_button" title="Search ChronoZoom" alt="Search ChronoZoom" src="Images/search_off.jpg"
                    onmouseup="onSearchClicked();" onmouseover="searchHighlight(true);"
                    onmouseout="searchHighlight(false);" />
                <img style="margin: 5px 0 0 14px" title="Take a guided tour" id="tours_index" alt="Take a guided tour" src="Images/tour_off.jpg"
                     onmouseover="tourButtonHighlight(true);" onmouseout="tourButtonHighlight(false);"
                    onmouseup="onTourClicked();" />
            </div>
            <div class="regimes_rects" style="right: 0px; position: absolute; top: 0px; width: 302px; height: 62px;">
                <div id="human_rect" class="regime_rect" style="position: absolute; top: 1px; width: 17px; left: 284px;
                    height: 10px; background-color: rgba(212, 92, 70, 1.0); cursor: pointer;" onclick="navigateToBookmark(humanityVisible);">
                </div>
                <div id="prehuman_rect" class="regime_rect" style="position: absolute; top: 13px; width: 100px; left: 201px;
                    height: 10px; background-color: rgba(237, 145, 50, 1.0); cursor: pointer;" onclick="navigateToBookmark(prehistoryVisible);">
                </div>
                <div id="life_rect" class="regime_rect" style="position: absolute; top: 25px; width: 255px; left: 46px;
                    height: 10px; background-color: rgba(73, 150, 73, 1.0); cursor: pointer;" onclick="navigateToBookmark(lifeVisible);">
                </div>
                <div id="earth_rect" class="regime_rect" style="position: absolute; top: 37px; width: 260px; left: 41px;
                    height: 10px; background-color: rgba(81, 127, 149, 1.0); cursor: pointer;" onclick="navigateToBookmark(earthVisible);">
                </div>
                <div id="cosmos_rect" class="regime_rect" style="position: absolute; top: 49px; width: 300px; left: 1px;
                    height: 10px; background-color: rgba(152, 108, 157, 1.0); cursor: pointer;" onclick="navigateToBookmark(cosmosVisible);">
                </div>
                <div id="regime_navigator" style="position: absolute; top: 0px; left: 1px; width: 300px;
                    height: 62px; background-color: White; opacity: 0.3; pointer-events: none;">
                </div>
            </div>
            <!--<img alt="regimes_navigator" style="right: 0px; position: absolute; top: 0px" src="Images/regimes.png" />-->
            <div class="regimes_titles" style="top: 0px; position: absolute; right: 309px; font-size: 11.5;">
                <div style="position: relative; height: 12px;">
                    <div class="regimes_title" onclick="navigateToBookmark(humanityVisible);">
                        Humanity</div>
                </div>
                <div style="position: relative; height: 12px;">
                    <div class="regimes_title" onclick="navigateToBookmark(prehistoryVisible);">
                        Human&nbsp;Prehistory</div>
                </div>
                <div style="position: relative; height: 12px;">
                    <div class="regimes_title" onclick="navigateToBookmark(lifeVisible);">
                        Life</div>
                </div>
                <div style="position: relative; height: 12px;">
                    <div class="regimes_title" onclick="navigateToBookmark(earthVisible);">
                        Earth</div>
                </div>
                <div style="position: relative; height: 12px;">
                    <div class="regimes_title" onclick="navigateToBookmark(cosmosVisible);">
                        Cosmos</div>
                </div>
            </div>

            
            <div id="bc_navLeft"  onclick="breadCrumbNavLeft()" class="breadCrumbNavButton">&#171;</div> 
            <div id="breadCrumbsPanel" class="breadCrumbPanel unselectable">
                <table id="breadCrumbsTable" class="breadCrumbTable">
                    <tr>
                    </tr>
                </table>
            </div>
            <div id="bc_navRight" onclick="breadCrumbNavRight()" class="breadCrumbNavButton">&#187;</div>
            

            <div id="tour_control" class="tour_control" style="display: none; top: 14px; position: relative;
                margin: auto">
                <img id="tour_prev" src="Images/tour_prev_off.jpg" alt="previous" onmouseout="toggleOffImage('tour_prev');"
                    onmouseover="toggleOnImage('tour_prev');" onclick="tourPrev();" />
                <img style="margin: 0 0 0 16px"
                    id="tour_playpause" src="Images/tour_pause_off.jpg" alt="play/pause" onmouseout="toggleOffImage('tour_playpause');"
                    onmouseover="toggleOnImage('tour_playpause');" onclick="tourPlayPause();" />
                <img
                    style="margin: 0 0 0 16px" id="tour_next" src="Images/tour_next_off.jpg" alt="next"
                    onmouseout="toggleOffImage('tour_next');" onmouseover="toggleOnImage('tour_next');"
                    onclick="tourNext();" />
                <img style="margin: 0 0 0 10px" id="tour_exit" src="Images/tour_exit_off.jpg"
                    alt="exit" onmouseout="toggleOffImage('tour_exit');" onmouseover="toggleOnImage('tour_exit');"
                    onclick="tourAbort();" />
            </div>
        </div>
    </div>
     <div id="axis" style="width: 100%; height: 47px; overflow: hidden" onselectstart="return false;">
    </div>
    <div id="vc" style="width: 100%; height: auto; overflow: hidden; background-image: url('Images/background.jpg');
        background-repeat: no-repeat; background-attachment: fixed; background-position: center center;
        background-size: cover">
        <div id="layerTimelines" onselectstart="return false;">
        </div>
               <!--for popup's-->
		  <p class="bubbleInfo" style="display:inline-block; z-index:3000;" id="defaultBox">
			<span></span>
		  </p>
        <!--//////////-->
        <div id="layerInfodots" onselectstart="return false;">
        </div>
        <div id="iframe_layer" onselectstart="return false;">
        </div>
    </div>
    
    <div id="search" class="czWindow" style="z-index: 2010;max-height:250px; display: none">
        <div class="header" onselectstart="return false;">
            Search</div>
        <div>
            <input id="searchTextBox" class="czTextBox emptyTextBox" style="margin: 10px 10px 10px 10px;
                width: 190px" value="type here..." />
        </div>
        <div class="searchResults" style="height:auto;max-height:140px">
        </div>
        <div>
            <!--<img src="Images/loading10.gif" style="width: 190px;margin-left: 10px; height: 20px;display:none;" alt="Searching..." id="loadingImage"/>-->
            <img src="Images/loading.gif" style="width: 190px;margin-left: 10px; margin-bottom:10px;height: 20px;display:none;" alt="Searching..." id="loadingImage"/>
        </div>
    </div>
    <div id="tours" class="czWindow" onselectstart="return false;" style="display: none">
        <div class="header">
            Tours</div>
        <div id="tours-narration" class="narration" onclick="onNarrationClick();">
            Narration: <span id="tours-narration-on" class="narration-selected">ON</span> |
            <span id="tours-narration-off">OFF</span>
        </div>
        <div id="tours-content" class="content">
        </div>
    </div>
    <div id="bookmarks" class="bookmarksWindow" onselectstart="return false;" style="display: none">
        <img id="bookmarksCollapse" src="Images/collapse-left.png" class="headerButton" onclick="onBookmarksCollapse();" />
        <div class="header">
        </div>
        <div class="slideHeader">
        </div>
        <div class="slideText">
        </div>
        <div class="slideFooter">
        </div>
    </div>
    <div id="bibliographyBack" class="biblBack" style="display: none">
        <div id="bibliographyOut" class="biblOuterWindow">
            <div id="bibliography" class="biblWindow">
                <img class="closeButton" id="biblCloseButton" src="Images/close_off.png" onmouseover="toggleOnImage('biblCloseButton', 'png');"
                    onmouseout="toggleOffImage('biblCloseButton', 'png');" alt="Close" onselectstart="return false;" />
                <div class="title" onselectstart="return false;">
                    <span>Infodot name</span> &gt; Bibliography
                </div>
                <div class="sources">
                </div>
            </div>
        </div>
    </div>
    
    <div style="position: relative; text-align: right;" >
            <span id="Span12" class="footerLeftText" >
        Created by: 
        </span>
        <span id="Span13" class="footerLeftTextMRC" onclick="javascript: window.open('http://research.microsoft.com/en-us/projects/chronozoom/default.aspx');" >
            <img id="Img1" src="Images/mrclogo-17x53.png" alt="Microsoft Research" />
        </span>
        <span id="Span14" class="footerLeftTextUC" onclick="javascript: window.open('http://eps.berkeley.edu/');" >
            <img id="Img2" src="Images/berkeley-logo-17-86.png" alt="University of California Berkeley Department of Earth and Planetary Science" />
        </span>
        <span id="Span15" class="footerLeftTextMSU" onclick="javascript: window.open('http://www.cs.msu.su/');" >
            <img id="Img3" src="Images/MSU_logo-white17x74.png" alt="Moscow State University" />
        </span>
          <span id="Span11" class="footerSurveyText" onclick="javascript: window.open('http://go.microsoft.com/?linkid=9797058');">
        Take Our Survey
        </span>
         <span id="Span10" class="pipeText" >
        |
        </span>
         <span id="Span2" class="footerText" onclick="javascript: window.open('http://chronozoom.codeplex.com/workitem/list/basic');">
        Report a Problem
        </span>
        <span id="Span3" class="pipeText" >
        |
        </span>
      <span id="Span9" class="footerText" onclick="javascript: window.open('BehindTheScenes.htm');">
        Behind the Scenes
        </span>
        <span id="Span1" class="pipeText" >
        |
        </span>
         <span id="Span4" class="footerText" onclick="javascript: window.open('TermsOfUse.htm');">
        Terms of Use
        </span>
        <span id="Span5" class="pipeText" >
        |
        </span>
         <span id="Span6" class="footerText" onclick="javascript: window.open('Privacy.htm');">
        Privacy
        </span>
        <span id="Span7" class="pipeText" >
        |
        </span>
         <span id="Span8" class="footerText" onclick="javascript: window.open('Trademark_Copyright.htm');">
        Trademark
        </span>
    </div>

    <div id="welcomeScreenBack" class="welcomeScreenBack">
        <div id="welcomeScreenOut" class="welcomeScreenOuterWindow">
            <div id="welcomeScreen" class="welcomeScreen">
                <div class="titleArea">
                <img class="closeButton" id="welcomeScreenCloseButton" src="Images/wlcmScreen_close_off.png" onmouseover="toggleOnImage('welcomeScreenCloseButton', 'png');"
                    onmouseout="toggleOffImage('welcomeScreenCloseButton', 'png');" alt="Close" onselectstart="return false;" 
    	            onclick="hideWelcomeScreen();"/>
                <div class="title" onselectstart="return false;">
                    <span>Welcome to ChronoZoom beta!</span>
                </div>
                </div>
                <div class="content">
                    <div class="description">
                        ChronoZoom is an interactive timeline for all of history.
                        <p>Explore all of the past - from the Big Bang, to the dinosours, to ancient and modern history.</p>
                        Click or scroll to navigate through events and timelines. Watch our introduction video for a quick overview of this project.

                        <div style="position: absolute; bottom: 0px;">
                            <button class="button" onclick="closeWelcomeScreen()">Start Exploring!</button>
                            <div>
                                <input type="checkbox" id="welcomeScreenCheckbox" name="welcomeScreenCheckbox"/> 
							    <label for="welcomeScreenCheckbox" unselectable="on" style="font-family: Arial; font-size: 16px;">Don't Show Again</label>
                            </div> 
                        </div>
                    </div>
                    <div class="media" id="welcomeScreenMedia">
                        <iframe class="player" id="welcomeVideo" src="http://www.youtube.com/embed/3jvJD8Qv5ec" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!--<div id="welcomeScreenIntroduction">
		<div id="welcomeScreenBack" class="fullScreenBlurred">
	
		    <div id="welcomeScreenOut" class="welcomeScreenOuterWindow" style="top: 150px">
				    <div class="innerIntroductionContent">

					    <div style="position:absolute; top:30px; left:20px; width:94%; height:50px;" class="topIntro">
						    <table cellpadding="0" cellspacing="0" style="width:100%;">
							    <tr>
							    <td>
								    <label>&nbsp;&nbsp;Introduction to ChronoZoom</label>
							    </td>

							    <td style="padding-right:10px; padding-top:3px" >
								    <img src="../Images/welcomeCloseButton.png"  onclick="hideWelcomeScreen()" />
							    </td>
							    </tr>
						    </table>
					    </div>

					

					    <div style="position:relative; top:120px; left:20px; display:table; height:385px; width:94%">
						
						    <table cellpadding="0" cellspacing="" style="height:385px;">
							    <tr>
								    <td style="width:640px; padding-left:70px">
									    <iframe style="text-align:center" id="welcomeVideo" class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/HjQxjVaMp-g" frameborder="0">
									    </iframe>
								    </td>

								    <td style="padding-left: 15px" >
									    <img src="../Images/welcomeButtonNext.png" />
								    </td>
							    </tr>
						    </table>

					    </div>

					    <div style="position:absolute; bottom:30px; left:20px; height:20px; display:table;">
					
						    <div style="display:table-cell; float: left">
  							    <input type="checkbox" id="welcomeScreenCheckbox" name="welcomeScreenCheckbox" onclick="checkboxWelcomeChanged()" /> 

							    <label for="welcomeScreenCheckbox" unselectable="on">Don't show again</label> 
						    </div>

						    <div id="navigationControls" style="display:table-cell; float: left">
							    <ul>
								    <li class="active" />
								    <li />
								    <li />
								    <li />
							    </ul>							
						    </div>

					    </div>
				    </div>
		    </div>
        </div>
	</div>-->

</body>
</html>
